<template>
  <div class="tpl16-goods"
     :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'">
    <ul>
      <li class="goods-item" v-for="(goods,index) in tplItemData.goodslist" :key="index">
        <a class="goodsimg" @click="openLink(goods.link)">
          <img
            :src="goods.is_compress == 1 ?`${goods.pic}480x480`:goods.pic"
            alt
          />
        </a>
        <div class="goods-info">
          <a @click="openLink(goods.link)" :class="['title',tplItemData.titleLine?'multiLine':'']" v-if="tplItemData.showName == 1 ||tplItemData.showName"> {{goods.title}} </a>
          <p :class="['pic_box',tplItemData.showName == 1?'pic_box1':'']" >
            <span class="goods-pirce" v-html="scaleGoodsPriceFn(goods.price)"></span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
import { scaleGoodsPrice } from '@/utils/index'
export default Vue.extend({
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {

    }
  },
  created() {
    // // console.log(this.tplItemData, 'aaaaa')
  },
  computed: {
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    },
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    }
  }
})
</script>

<style lang="scss" >
@import "src/styles/mixin";
.tpl16-goods{
  a{
    display: block;
  }  
  ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .goods-item{
      width: 27%;
      margin-bottom: 20px;
      // 图片样式
      .goodsimg{
        position: relative;
        padding-top: 100%;
        overflow: hidden;
        border-radius: 50%;
        img{
          position: absolute;
          top: 0;
          width: 100%;
        } 
      }
      // 商品信息
      .goods-info{
        position: relative;
        .title{
          color: #666;
          @include lineClamp(28px,56px,1);
          &.multiLine{
            @include lineClamp(28px,56px,2);
          }
        }
        .pic_box{
          overflow: hidden;
          padding: 10px 0;
          text-align: center;
          .goods-pirce{
            .price-scale{
              font-weight: 300;
              color: #d11f02;
            }
          }
        }
      }
    }
  }
}

</style>